<template>
  <div>
    <ZgDialog
      ref="dialog"
      title="功能授权"
      @ok="onOk">
      <div style="height:476px;overflow-y: scroll;">
        <a-tree
          class="treeData"
          :blockNode="true"
          :replaceFields="{children:'children', title:'name', key:'id' }"
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @expand="onExpand"
          @check="onCheck"
        />
      </div>
    </ZgDialog>
  </div>
</template>
<script>

export default {
  data () {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      roleId: ''
    }
  },
  methods: {
    open (obj) {
      this.roleId = obj.roleId
      this.$refs.dialog.open()
      this.getCheckedList(obj.roleId)
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
    },
    getCheckedList(id) {
      this.$http.post('/zg-system/role/listMenu', { 'roleId': id }).then(res => {
        if (res.code === 1) {
          this.checkedKeys = res.data.map(item => {
            return item.menuId
          })
          console.log('this.checkedKeys', this.checkedKeys)
        }
      })
    },
    getTreeData() {
      this.$http.get('/zg-system/menu/list').then(res => {
        if (res.code === 1) {
          this.treeData = res.data
        }
      })
    },
    onOk() {
      this.$http.post('/zg-system/role/addMenu', { menuIds: this.checkedKeys, roleId: this.roleId }).then(res => {
        if (res.code === 1) {
          this.$refs.dialog.close()
          this.$message.success('授权成功')
        }
      })
    }

  },
  created() {
    this.getTreeData()
  }
}
</script>

<style lang="scss">
.treeData{
  border-top:1px solid #ccc !important;
  li{
    border-bottom:1px solid #ccc !important;
    padding:12px 0 !important;
  }
  li:nth-child(1){
    padding-top:12px !important;
  }
  .ant-tree-child-tree{
    display: flex;
    flex-wrap: wrap;
    li{
      display: inline-block;
      flex:1;
      min-width: 50%;
    }
  }
}
</style>
